/* Basic reset */
* { box-sizing: border-box; }
html,body { height: 100%; margin:0; }
body {
	background-color: #D2691E; /* bright brown background (chocolate) */
	font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #111;
}

/* Center the grid inside the page */
main.layout {
	width: min(980px, 95%);
	margin: 40px auto;
	display: grid;
	grid-template-rows: auto auto auto auto; /* intro row auto-sizes to image */
	grid-template-columns: 1fr;
	gap: 0;
	border: 2px solid rgba(0,0,0,0.6);
	background: #5C3317; /* dark brown container */
}

.site-header {
	padding: 18px 24px;
	text-align: center;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	background: #7A4A2B; /* lighter brown header */
}
.site-header h1 {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: 1.3rem;
	color: #fff; /* light heading on dark header */
}

.intro {
	border-bottom: 1px solid rgba(0,0,0,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff; /* plain introduction section */
	padding: 0; /* image should fill without inner padding */
}
.intro-inner {
	width: 100%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight: 600;
	color: #222;
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
}

/* Dog photo styles: let the image scale naturally (no cropping) */
.dog-photo {
	width: 100%;
	height: auto; /* keep natural aspect ratio */
	object-fit: contain; /* ensure whole image is visible */
	display: block;
}

.columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border-top: 1px solid rgba(0,0,0,0.05);
	border-bottom: 1px solid rgba(0,0,0,0.05);
}
.col {
	padding: 18px 16px;
	min-height: 320px;
	border-right: 1px solid rgba(0,0,0,0.25);
	background: #7A4A2B; /* column panels: lighter brown */
	color: #f4efe6; /* light text for readability */
}
.col:last-child { border-right: none; }
.col h2 { margin-top: 0; font-family: 'Roboto', sans-serif; font-weight:700; font-size:1rem; color: #fff; }
.col p { font-family: 'Roboto', sans-serif; font-weight:300; line-height:1.5; color: #f4efe6; }

.site-footer {
	padding: 12px 18px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	border-top: 1px solid rgba(0,0,0,0.25);
	background: #7A4A2B;
	color: #f4efe6;
}

/* Responsive: stack columns on small screens */
@media (max-width: 800px) {
	.columns { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	main.layout { width: 96%; margin: 20px auto; }
	.columns { grid-template-columns: 1fr; }
	.col { border-right: none; }
}